import {
  Box,
  Image,
  InputGroup,
  Input,
  InputLeftElement,
  InputRightElement,
  Flex,
  Spacer,
  HStack,
  Text,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  FormControl,
  FormLabel,
  Popover,
  PopoverContent,
  PopoverBody,
  useDisclosure,
} from "@chakra-ui/react";
import React, { useState } from "react";
import { SearchIcon, AddIcon } from "@chakra-ui/icons";
import Head from "next/head";
import styles from "../styles/Home.module.css";

export default function Home() {
  const initNotes = [
    { title: "百度", url: "https://www.baidu.com/" },
    { title: "chakra-ui", url: "https://chakra-ui.com/" },
  ];

  const initForm = { title: "", url: "" };

  const [notes, setNotes] = useState(initNotes);
  const [form, setForm] = useState(initForm);
  const [disabled, setDisabled] = useState(true);
  const { isOpen, onOpen, onClose } = useDisclosure();

  // 名称和网址为填
  const checkForm = () => {
    if (form.title && form.url) {
      setDisabled(false);
    } else {
      setDisabled(true);
    }
  };

  // 完成添加快捷方式
  const onComplete = () => {
    if (form.title && form.url) {
      const _notes = [...notes, form];
      setNotes(_notes);
      onClose();
    }
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Google</title>
      </Head>

      <main className={styles.main}>
        <Image src="google_logo.svg" mb="38px" />
        <InputGroup marginBottom="32px">
          <InputLeftElement
            children={<SearchIcon color="#62666a" marginLeft="10px" />}
          />
          <Input
            placeholder="在 Google 上搜索，或者输入一个网址"
            borderRadius="50px"
            focusBorderColor="#ddd"
            boxShadow="base"
          />
          <InputRightElement
            children={
              <Image src="googlemic.svg" width="18px" marginRight="10px" />
            }
          />
        </InputGroup>
        <HStack spacing="0px" width="90%" flexWrap="wrap">
          {notes.map((note, index) => {
            return (
              <Box className={styles.item} key={note.title + index}>
                <Popover>
                  <PopoverContent>
                    <PopoverBody>
                      Are you sure you want to have that milkshake?
                    </PopoverBody>
                  </PopoverContent>
                </Popover>
                <Image src={note.url + "/favicon.ico"} />
                <Text>{note.title}</Text>
              </Box>
            );
          })}
          {notes.length < 8 && (
            <Box className={styles.item} onClick={onOpen}>
              <AddIcon margin="15px 0" />
              <Text>添加快捷方式</Text>
            </Box>
          )}
        </HStack>
      </main>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader fontSize="16px" fontWeight="normal">
            添加快捷方式
          </ModalHeader>
          <ModalBody>
            <FormControl marginBottom="20px">
              <FormLabel fontSize="12px">名称</FormLabel>
              <Input
                onChange={(e) => {
                  setForm(Object.assign(form, { title: e.target.value }));
                  checkForm();
                }}
              />
            </FormControl>
            <FormControl>
              <FormLabel fontSize="12px">网址</FormLabel>
              <Input
                onChange={(e) => {
                  setForm(Object.assign(form, { url: e.target.value }));
                  checkForm();
                }}
              />
            </FormControl>
          </ModalBody>

          <ModalFooter>
            <Button
              colorScheme="blue"
              variant="inline"
              mr={3}
              onClick={onClose}
            >
              取消
            </Button>
            <Button colorScheme="blue" disabled={disabled} onClick={onComplete}>
              完成
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </div>
  );
}
